<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '加仓',
  },
}
</route>
<template>
  <PageLayout :navbarShow="false" navTitle="加减仓">
    <scroll-view scroll-y class="wrap">
      <!--导航栏-->
      <view class="navbar">
        <wd-navbar
          title="加减仓"
          :bordered="false"
          custom-style="background-color: transparent !important;"
        ></wd-navbar>
      </view>

      <!--列表-->
      <view style="width: 95%; margin: 0 auto">
        <view
          v-for="i in dataList"
          :key="i"
          style="
            background-color: #fff;
            margin-bottom: 20rpx;
            border-radius: 20rpx;
            padding: 20rpx;
            font-size: 24rpx;
          "
        >
          <view
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-bottom: 20rpx;
            "
          >
            <view style="margin-left: 10rpx; font-weight: 600">
              {{ i.tradeType == 0 ? '买入' : '卖出' }}
            </view>
            <view v-if="i.tradeStatus == 1">交易成功</view>
          </view>
          <view style="display: flex">
            <view>
              <wd-tag color="#6f717a" bg-color="#f6f8fb">
                申请：{{ moment(i.tradeDate).format('YYYY-MM-DD') }}
              </wd-tag>
            </view>

            <view style="margin-left: 20rpx">
              <wd-tag color="#6f717a" bg-color="#f6f8fb">
                成交：{{ moment(i.tradeSuccessDate).format('YYYY-MM-DD') }}
              </wd-tag>
            </view>
          </view>
          <view style="color: #595959; font-size: 22rpx; margin-bottom: 10rpx; margin-top: 10rpx">
            成交份额：{{ i.tradeNum }}份
          </view>
          <view style="color: #595959; font-size: 22rpx; margin-bottom: 10rpx; margin-top: 10rpx">
            成交金额：￥{{ i.tradeMoney }}
          </view>
          <view style="color: #595959; font-size: 22rpx; margin-bottom: 10rpx">
            成交份额：{{ i.tradeNum }}份
          </view>
          <view style="display: flex; justify-content: end">
            <view
              style="
                padding: 10rpx 20rpx;
                background-color: #f2f2f2;
                border-radius: 24rpx;
                font-size: 22rpx;
              "
            >
              查看
            </view>
            <view
              style="
                padding: 10rpx 20rpx;
                border-radius: 24rpx;
                margin-left: 10rpx;
                font-size: 22rpx;
                color: #fa4350;
                border: 1px solid #fa4350;
              "
            >
              删除
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!--弹窗-->
    <wd-popup v-model="showPop" position="bottom" custom-style="border-radius: 20rpx 20rpx 0px 0px">
      <view style="text-align: center; padding: 30rpx">
        <view style="font-weight: 600; margin-bottom: 40rpx">（模拟操作）是否确认操作信息？</view>
        <view style="margin-bottom: 40rpx; font-size: 24rpx">
          该操作仅为模拟操作，请注意同步实际操作！
        </view>
        <view
          style="display: flex; align-items: center; justify-content: center; margin-top: 20rpx"
        >
          <view
            style="
              width: 40%;
              padding: 20rpx;
              background-color: #f2f2f2;
              border-radius: 20rpx;
              margin-right: 20rpx;
            "
            @click="showPop = false"
          >
            取消
          </view>
          <view
            style="
              width: 40%;
              padding: 20rpx;
              background-color: #3379fb;
              border-radius: 20rpx;
              color: #fff;
            "
            @click="onClickCorfim"
          >
            确认提交
          </view>
        </view>
      </view>
    </wd-popup>
  </PageLayout>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { http } from '@/utils/http'
import moment from 'moment'
import { useToast } from 'wot-design-uni'

defineOptions({
  name: 'addChoose',
  options: {
    styleIsolation: 'shared',
  },
})
// 类型
const typeList = ref([
  { key: 0, name: '加仓' },
  { key: 1, name: '减仓' },
])
// 份额类型
const numTypeList = ref([
  { key: 1 / 5, name: '1/5' },
  { key: 1 / 4, name: '1/4' },
  { key: 1 / 3, name: '1/3' },
  { key: 1 / 2, name: '1/2' },
  { key: 1, name: '全仓' },
])
// 金额类型
const moneyList = ref([
  { key: 100, name: '100' },
  { key: 200, name: '200' },
  { key: 500, name: '500' },
  { key: 1000, name: '1000' },
  { key: 5000, name: '5000' },
  { key: 10000, name: '10000' },
])
// 基础信息
const infoForm = ref<any>({})
// 参数
const param = ref<any>({
  tradeDate: Date.now(),
  tradeDateType: 0,
  tradeNum: null,
  tradeRate: 0,
  tradeType: 0,
  tradeMoney: null,
  tradeEstimateVal: 0,
})
// 显示弹窗
const showPop = ref(false)
// 消息提示
const toast = useToast()
// 持有ID
const holdId = ref('')
// 数据列表
const dataList = ref<any>([])
// 获取详情
const loadDetail = () => {
  http.get('/sys/fund/trade/page', { holdId: holdId.value }).then((res: any) => {
    if (res.success) {
      dataList.value = res.result.records
    }
  })
}
// 确认提交
const onClickCorfim = () => {
  // 设置主键
  param.value.holdId = holdId.value
  // 设置代码
  param.value.code = infoForm.value.code
  // 发起请求
  http.post('/sys/fund/trade/create', param.value).then((res: any) => {
    if (res.success) {
      // 隐藏弹窗
      showPop.value = false
      // 提示
      toast.success('操作成功')
      // 返回上一级
      setTimeout(() => {
        uni.navigateBack()
      }, 2500)
    }
  })
}
// 点击立即提交
const onClickSubmit = () => {
  if (Number(param.value.tradeType) === 0) {
    // 金额需大于0
    if (param.value.tradeMoney === null || param.value.tradeMoney <= 0) {
      toast.error('请输入有效加仓金额')
      return false
    }
  } else if (Number(param.value.tradeType) === 1) {
    // 份额需大于0
    if (param.value.tradeNum <= 0) {
      toast.error('请输入有效减仓份额')
      return false
    }
  } else {
    return false
  }
  // 显示确认弹窗
  showPop.value = true
}

onLoad((option) => {
  holdId.value = option.holdId
  param.value.tradeType = option.type
  loadDetail()
})
</script>

<style lang="scss" scoped>
.wrap {
  background-image: url(../../static/hold/buy-bg.png);
  background-size: 100% 100%;
  width: 100%;
  height: 100%;
  padding-bottom: 40rpx;
  :deep(.wd-picker__value) {
    margin-right: 0px;
  }
  :deep(.wd-picker__cell) {
    padding-right: 0px;
  }
  :deep(.wd-picker__arrow) {
    display: none;
  }
}
</style>
